import './globals.css';

export default function Home() {
  return (
    <div className="container">
      <h1>SPA Demo - Next.js 双向数据绑定示例</h1>
      <p>这是一个使用Next.js实现的单页面应用(SPA)，展示了React的双向数据绑定特性。</p>
      
      <div className="advantages">
        <h3>React/Next.js 双向数据绑定的优势</h3>
        <ul>
          <li>基于useState Hook的响应式系统，简化了状态管理</li>
          <li>数据变化自动触发组件重新渲染</li>
          <li>单向数据流结合事件处理实现双向绑定</li>
          <li>组件化架构提高了代码的可维护性</li>
          <li>App Router提供了更好的代码组织和路由管理</li>
        </ul>
      </div>
      
      <div className="examples">
        <h3>可用示例</h3>
        <ul>
          <li><strong>文本绑定</strong> - 访问 <code>/text-binding</code> 查看双向文本数据绑定</li>
          <li><strong>计数器</strong> - 访问 <code>/counter</code> 查看响应式状态管理</li>
          <li><strong>列表绑定</strong> - 访问 <code>/list</code> 查看数组双向绑定</li>
        </ul>
      </div>
    </div>
  );
}